.tooltip {
  --tooltip-radius: var(--mantine-radius-default);

  position: absolute;
  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-xs);
  pointer-events: none;
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  border-radius: var(--tooltip-radius);

  @mixin where-light {
    background-color: var(--tooltip-bg, var(--mantine-color-gray-9));
    color: var(--tooltip-color, var(--mantine-color-white));
  }

  @mixin where-dark {
    background-color: var(--tooltip-bg, var(--mantine-color-gray-2));
    color: var(--tooltip-color, var(--mantine-color-black));
  }

  &:where([data-multiline]) {
    white-space: normal;
  }

  &:where([data-fixed]) {
    position: fixed;
  }
}

.arrow {
  background-color: inherit;
  border: 0;
  z-index: 1;
}
